<template>
  <div class="app" ref="appRef">
    <div class="Left"></div>
    <div class="Top"></div>
    <div class="Right"></div>
    <div class="Bottom">
      <ul class="tabBar">
        <li v-for="(item, index) in list" @click="goFn(item.path, index)">
          <img
            :src="
              getAssetsImg(index == activeIndex ? item.activeIcon : item.icon)
            "
            mode="scaleToFill"
          />
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
    <div class="Content"><router-view /></div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
// import useDraw from "./utils/useDraw";
const router = useRouter();
const route = useRoute();
// const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
//table切换
const list = ref([
  {
    title: "智能检测",
    path: "/employment",
    icon: "./assets//images/intelligence.png",
    activeIcon: "./assets/images/intelligencecheck.png",
  },
  {
    title: "就业态势",
    path: "/intelligence",
    icon: "./assets//images/employment.png",
    activeIcon: "./assets/images/employmentcheck.png",
  },
  {
    title: "安防管理",
    path: "/maintenance",
    icon: "./assets//images/maintenance.png",
    activeIcon: "./assets/images/maintenancecheck.png",
  },
  {
    title: "设备运维",
    path: "/secure",
    icon: "./assets//images/secure.png",
    activeIcon: "./assets/images/securecheck.png",
  },
]);
const activeIndex = ref("0");
// onMounted(() => {
//   windowDraw();
//   calcRate();
// }),
//   onUnmounted(() => {
//     unWindowDraw();
//   });
const goFn = (path, index) => {
  activeIndex.value = index;
  router.push(path);
};
const getAssetsImg = (image) => {
  return new URL(`${image}`, import.meta.url).href;
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  // background: black;
}
.app {
  font-family: "DigitalBold";
  font-size: 28px;
  height: 1080px;
  width: 100%;

  .Left {
    width: 605px;
    height: 100%;
    position: absolute;

    left: 0;
    top: 0;
    z-index: 8;
    background-size: cover;
    background: url("./assets/images/Photo／背景／Left@2x.png") no-repeat center;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .Right {
    width: 605px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    background: url("./assets/images/Photo／背景／Right@2x.png") no-repeat
      center;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .Top {
    width: 100%;
    height: 95px;
    z-index: 10;
    background: url("./assets/images/Photo／背景／Top@2x.png") no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    // background-position: center center;
    // background: cover;
  }
  .Bottom {
    position: absolute;
    bottom: 0;
    background: url("./assets/images/Photo／背景／菜单栏@2x.png") no-repeat
      center;
    width: 1092px;
    height: 129px;
    left: 50%;
    margin-left: -546px;
    z-index: 20;
    .tabBar {
      display: flex;
      justify-content: center;
      // align-items: center;
      // height: 100%;
      li {
        width: 120px;
        height: 120px;
        list-style: none;
        margin: 0 10px;
        // border: 1px solid red;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .Content {
    // background: pink;
    position: absolute;
    top: 95px;
    bottom: 40px;
    right: 60px;
    z-index: 11;
    left: 60px;
    display: flex;
    justify-content: center;
  }
}
</style>
